<template>
  <div class="addEdit-block">
    <el-form
      class="detail-form-content"
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      :style="{backgroundColor:addEditForm.addEditBoxColor}"
    >
      <el-row >
        <el-col :span="12">
          <el-form-item class="input" label="账号" prop="zhanghao">
            <el-input v-model="ruleForm.zhanghao" placeholder="账号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" label="密码" prop="mima">
            <el-input v-model="ruleForm.mima" placeholder="密码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" label="姓名" prop="xingming">
            <el-input v-model="ruleForm.xingming" placeholder="姓名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="select" label="性别" prop="xingbie">
            <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
              <el-option v-for="(item,index) in xingbieOptions" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="upload" label="头像" prop="touxiang">
            <file-upload
              tip="点击上传头像"
              action="file/upload"
              :limit="3"
              :multiple="true"
              :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
              @change="touxiangUploadChange"
            ></file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" label="邮箱" prop="youxiang">
            <el-input v-model="ruleForm.youxiang" placeholder="邮箱" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" label="手机" prop="shouji">
            <el-input v-model="ruleForm.shouji" placeholder="手机" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" label="人员类型" prop="renyuanleixing">
            <el-input v-model="ruleForm.renyuanleixing" placeholder="人员类型" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="btn">
        <el-button type="primary" class="btn-success" @click="onSubmit">提交</el-button>
        <el-button class="btn-close" @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addRenyuan } from '@/utils/renyuanLocal';
export default {
  data() {
    return {
      addEditForm: {},
      ruleForm: { zhanghao: '', mima: '', xingming: '', xingbie: '', touxiang: '', youxiang: '', shouji: '', renyuanleixing: '' },
      rules: { zhanghao: [ { required: true, message: '账号不能为空', trigger: 'blur' } ], mima: [ { required: true, message: '密码不能为空', trigger: 'blur' } ], xingming: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], xingbie: [], touxiang: [], youxiang: [], shouji: [], renyuanleixing: [] },
      xingbieOptions: ['男','女'],
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        addRenyuan({ ...this.ruleForm });
        this.$message.success('新增成功');
        this.$router.push('/renyuan/list');
      });
    },
    back() {
      this.$router.push('/renyuan/list');
    },
    touxiangUploadChange(urls) {
      this.ruleForm.touxiang = urls.join(',');
    },
  }
}
</script> 